<template>
  <h3>组件生命周期</h3>
  <p>{{ msg }}</p>
  <button @click="updateMsg">更新数据信息</button>
</template>
<script>
/*
* 生命周期函数
*
* 创建期: beforeCreate created
* 挂载期: beforeMounte mounted
* 更新期: beforeUpdate updated
* Mounted - re-render and patch 会循环处理
* 销毁期: beforeUnmount unmounted
* */

export default {
  data() {
      return {
        msg : "更新数据"
      }
  },
  methods: {
    // 这里点击更新的时候可以看到组件更新之前 beforeUpdate()  和组件更新之后 updated()
    updateMsg() {
      this.msg = "更新后的数据"
    },
  },
  beforeCreate() {
    console.log("组件创建之前");
  },
  created() {
    console.log("组件创建之后");
  },
  beforeMount() {
    console.log("组件渲染之前");
  },
  mounted() {
    console.log("组件渲染之后");
  },
  beforeUpdate() {
    console.log("组件更新之前");
  },
  updated() {
    console.log("组件更新之后");
  },
  beforeUnmount() {
    console.log("组件销毁之前");
  },
  unmounted() {
    console.log("组件销毁之后");
  },
}

</script>